<template>
    <div>
        <div lang='ch' class='cen' id='clock'>
            <div>
                <span class='clockNum' v-if='hour >= 10'>{{ hour }}</span>
                <span class='clockNum' v-else>{{ '0' + hour }}</span>
                <!--            <span> h</span>-->
            </div>
            <div>
                <span class='clockNum' v-if='min >= 10'>{{ min }}</span>
                <span class='clockNum' v-else>{{ '0' + min }}</span>
                <!--            <span> m</span>-->
            </div>
            <div>
                <span class='clockNum' v-if='second >= 10'>{{ second }}</span>
                <span class='clockNum' v-else>{{ '0' + second }}</span>
                <!--            <span> s</span>-->
            </div>
        </div>
        <div class='cen'>
<!--            <el-button :disabled='status === 0 || status === -1 || status === 3' @click='pause()'>-->
<!--                <svg t="1659424249986" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2107" width="32" height="32"><path d="M686.480358 119.560026c0-32.377408 26.325575-58.644655 58.644655-58.644655 32.386618 0 58.645678 26.420743 58.645678 58.644655l0 781.930779c0 32.376385-26.325575 58.644655-58.645678 58.644655-32.385595 0-58.644655-26.419719-58.644655-58.644655L686.480358 119.560026zM217.321072 119.560026c0-32.377408 26.325575-58.644655 58.645678-58.644655 32.385595 0 58.644655 26.420743 58.644655 58.644655l0 781.930779c0 32.376385-26.325575 58.644655-58.644655 58.644655-32.385595 0-58.645678-26.419719-58.645678-58.644655L217.321072 119.560026z" p-id="2108" fill="#ffffff"></path></svg>-->
<!--            </el-button>-->
<!--            <el-button :disabled='status === 1 || status === 3' @click='play()'>-->
<!--                <svg t="1659424217303" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1921" width="32" height="32"><path d="M122.112664 953.98846l816.371172-407.954319c0.723477-0.342808 1.411139-0.689708 2.099824-1.051959l1.107217-0.550539 0-0.077771c11.644201-6.757914 19.488867-19.377326 19.488867-33.827433 0-14.452153-7.844665-27.070542-19.488867-33.828456l0-0.228197L120.241037 65.955154c-1.14508-0.649799-2.310625-1.24127-3.51301-1.77646l-2.481518-1.240247-0.230244 0.170892c-4.047176-1.431605-8.41874-2.196015-12.96222-2.196015-21.589714 0-39.096437 17.506722-39.096437 39.096437 0 0.192382 0 0.382717 0 0.593518l0 821.276902 0.01842 0c0.438998 21.210068 17.754363 38.255279 39.078017 38.255279C108.80559 960.13546 116.040365 957.887256 122.112664 953.98846z" p-id="1922" fill="#ffffff"></path></svg>-->
<!--            </el-button>-->
            <el-button  @click='init()'>
                <svg t="1659424290880" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2293" width="32" height="32"><path d="M744.754576 199.227484c-65.344241-49.099255-146.592706-78.192873-234.616482-78.192873-215.928864 0-390.965389 175.017082-390.965389 390.964366 0 61.126172 14.030551 118.969579 39.038108 170.514535l-48.574299 34.016745c-31.394011-61.35437-49.109488-130.880863-49.109488-204.53128 0-248.322645 201.295586-449.610044 449.610044-449.610044 102.991676 0 197.868533 34.629705 273.675056 92.853781l0-63.60769c0-16.149818 13.020548-29.246091 29.322839-29.246091 16.207124 0 29.321816 13.134135 29.321816 29.246091l0 136.952138c0 8.094352-3.245927 15.386432-8.53335 20.694321-5.364171 5.307889-12.676717 8.590656-20.732184 8.590656L676.241156 257.872139c-16.150842 0-29.265534-13.019525-29.265534-29.321816 0-16.187681 13.134135-29.321816 29.265534-29.321816L744.754576 199.228507zM275.520589 824.771493c65.344241 49.100278 146.582473 78.19492 234.616482 78.19492 215.928864 0 390.965389-175.056991 390.965389-390.966413 0-49.556673-9.219989-96.938819-26.019607-140.540873l49.310056-34.515095c22.774703 53.79623 35.355229 112.937189 35.355229 175.055968 0 248.285806-201.305819 449.611068-449.610044 449.611068-102.981443 0-197.868533-34.630728-273.675056-92.854804l0 63.570851c0 16.186657-13.020548 29.283953-29.322839 29.283953-16.196891 0-29.321816-13.135158-29.321816-29.283953l0-136.953162c0-8.05649 3.245927-15.385409 8.524141-20.656459 5.373381-5.306866 12.684904-8.590656 20.741393-8.590656l136.952138 0c16.160051 0 29.265534 13.019525 29.265534 29.321816 0 16.188704-13.134135 29.321816-29.265534 29.321816L275.520589 824.77047z" p-id="2294" fill="#ffffff"></path></svg>
            </el-button>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
    name: 'TimePanel',
    data() {
        return {
            Isecond: 0,
            Imin: 0,
            Ihour: 2,
            second: 0,
            min: 0,
            hour: 2,
            status : -1, // -1：初始，1：播放，0：暂停,
            time : null
        };
    },
    methods: {
        rollTime : function () {

            this.second -= 1;
            if (this.second < 0) {
                this.second = 59;
                this.min -= 1;
            }
            if (this.min < 0) {
                this.min = 59;
                this.hour -= 1;
            }
            if (this.hour < 0) {
                // do sth
                this.hour = 0;
            }
            this.status = 1
        },
        addData (url) {
            let tmp = this.status
            this.status = 3
            this.$axios.get(this.GLOBAL.serverIp + '/api/' + url + "/").then((res) => {
                var time = this.getTime();
                this.second = time.second;
                this.min = time.min;
                this.hour = time.hour;
                // this.second = res.data.second;
                // this.min = res.data.min;
                // this.hour = res.data.hour;
                this.status = 1
                return 200
            }).catch((error)=> {
                document.getElementById('clock').style.color="#E6A23C"
                this.status = tmp
                return 400
            });
        },
        play() {
            // this.time = setInterval(this.testData, 1000);
            this.time = setInterval(this.addData("play"), 1000);
        },
        pause() {
            // clearInterval(this.time)
            let ans = this.addData("pause");
            if (ans == 200) {
                clearInterval(this.time)
                this.status = 0
            }
        },
        init() {
            let ans = this.addData("submersibleFiberMaxTime");
            if (ans == 200) {
                this.second = this.Isecond
                this.min = this.Imin
                this.hour = this.Ihour
                this.status = 1
                clearInterval(this.time)
                this.time = setInterval(this.rollTime, 1000);
            }
        }
    },
    mounted() {
        this.init();
        // 模拟部分，之后改成后端
        if (this.second <= 0 && this.min <= 0 && this.hour <= 0) {
            clearInterval(time);
        }
    }
};
</script>

<style scoped>

@font-face {
    font-family: Clock;
    src: url('~@/assets/css/digit/Mono Regular.ttf');
}

.clockNum {
    font-family: Clock;
    font-size: 80px;
    padding: 10px;
    text-align-last: justify;
}

.cen {
    display: flex;
    justify-content: center;
    align-items: center;
}

.el-button {
    background-color: transparent; /* 按钮背景颜色 */
    color: white;
    border: none;
}
</style>
